*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	box-sizing: border-box;
}
body{
	min-height: 100vh;
	background-image: linear-gradient(120deg,#3998db,#8e44ad,#3595db);
}
.login-form{
	width: 360px;
	height: 580px;
	background:white;
	padding: 80px 40px;
	border-radius: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	
}
.login-form h1{
	text-align: center;
	margin-bottom: 60px;
}
.txtb{
	border-bottom: 2px solid #dadada ;
	position: relative;
	margin: 30px 0;
}
.txtb input{
	font-size: 15px;
	color: #333;
	border: none;
	width: 100%;
	outline: none;
	background: none;
	padding: 2 5px;
	height: 40px;
	}
	.txtb span::before{
		content: attr(data-placeholder);
		position: absolute;
		top: 50%;
		left: 5px;
		color: #ADADAD;
		transform: translateY(-50%);
		z-index: -1;
		transition:.5s;
	}
	.txtb span::after{
		content: '';
		position: absolute;
		width: 100%;
		height: 2p;
		background: linear-gradient(120deg,#3498db,#8e44ad);
		transition: .5s;
	}
	.focus + span::before{
		top: -5px;
	
	}
	.focus + span::after{
		width: 100%;
		
	}
	.logbtn{
		display: block;
		width: 100%;
		height: 50px;
		border: none;
		background: linear-gradient(120deg,#3498db,#8e44ad,#3498db);
		background-size: 200%;
		color: #fff;
		outline: none;
		cursor: pointer;
		transition: .5s;
		}
		.logbtn:hover{
			background-position: right;
		}
		.bottom-text{
			margin-top: 60px;
			text-align: center;
			font-size: 13px;
		}